<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
    // var v=Vue.compile("<div><p>{{msg}}</p></div>");
    // console.log(v);
    var vm=new Vue({
        el:"#app",
        // template:"<p>创建的模板</p>",
        data:{
            msg:"初始变量"
        },
        watch:{
            msg(nv,ov){
                console.log("msg的watch方法",nv,ov);
            }
        },
        beforeCreate(){
            // console.log("beforeCreate");
            // alert("哈哈哈");
            console.group("beforeCreate=====>");
            console.log("this",this);
            console.log("vm.$options",this.$options);
            console.log("vm.$el",this.$el);
            console.log("vm.$data",this.$data);
            console.log("vm.msg",this.msg);
            console.groupEnd();
        },
        created(){
            console.group("created=====>");
            console.log("this",this);
            console.log("vm.$options",this.$options);
            console.log("vm.$el",this.$el);
            console.log("vm.$data",this.$data);
            console.log("vm.msg",this.msg);
            console.groupEnd();
        },
        beforeMount(){
            // console.log("beforeMount");
            // alert("哈哈哈");
            console.group("beforeMount=====>");
            console.log("this",this);
            console.log("vm.$options",this.$options);
            console.log("vm.$el",this.$el);
            console.log("vm.$data",this.$data);
            console.log("vm.msg",this.msg);
            console.groupEnd();
        },
        mounted(){
            // alert(1);
            console.group("mounted=====>");
            console.log("this",this);
            console.log("vm.$options",this.$options);
            console.log("vm.$el",this.$el);
            console.log("vm.$data",this.$data);
            console.log("vm.msg",this.msg);
            console.groupEnd();
        },
        beforeUpdate(){
            console.log("beforeUpdate");
            // alert("哈哈哈");
        },
        updated(){
            console.log("updated");
        }
    });
    // vm.$mount();
    // setTimeout(function(){
    //     vm.$mount("#app");
    // },3000)
    // vm.$nextTick(function(){
    //     console.log("updated数据更新后");
    // });
</script>
</html>